---
title: 共同編集
icon: '#pro/CloudCheck'
---

<MetaData
  lang="ja-JP"
  isPro
  meta={{
    preset: [{
      client: '@univerjs/preset-sheets-collaboration',
      locale: '@univerjs/preset-sheets-collaboration/locales/en-US',
      style: '@univerjs/preset-sheets-collaboration/lib/index.css',
    }],
    plugins: [{
      client: '@univerjs-pro/collaboration',
    }, {
      client: '@univerjs-pro/collaboration-client',
      facade: '@univerjs-pro/collaboration-client/facade',
      locale: '@univerjs-pro/collaboration-client/locale/en-US',
    }, {
      client: '@univerjs-pro/collaboration-client-ui',
      facade: '@univerjs-pro/collaboration-client-ui/facade',
      style: '@univerjs-pro/collaboration-client-ui/lib/index.css',
    }],
    server: 'Yes',
  }}
/>

<Callout type="warning" title="Caution">
  共同編集機能には Univer サーバーのサポートが必要です。Univer サーバーが正しくインストール・設定されていることを確認してください。詳細は [Pro へのアップグレード](/guides/pro) を参照してください。
</Callout>

共同編集機能により、複数のユーザーが同じドキュメントを同時に編集でき、変更はリアルタイムで同期されます。チームでのコラボレーションや複数ユーザー編集のシナリオに最適です。

## プリセットモード

### インストール

<Callout>
  `@univerjs/preset-sheets-collaboration` の `UniveSheetsCollaborationPreset` は、実行時に `UniverSheetsDrawingPreset` と `UniverSheetsAdvancedPreset` に依存します。先に `@univerjs/preset-sheets-drawing` と `@univerjs/preset-sheets-advanced` をインストールしてください。
</Callout>

```package-install
npm install @univerjs/preset-sheets-drawing @univerjs/preset-sheets-advanced @univerjs/preset-sheets-collaboration
```

### 使い方

```typescript
import { UniverSheetsAdvancedPreset } from '@univerjs/preset-sheets-advanced' // [!code ++]
import UniverPresetSheetsAdvancedEnUS from '@univerjs/preset-sheets-advanced/locales/en-US' // [!code ++]
import { UniverSheetsCollaborationPreset } from '@univerjs/preset-sheets-collaboration' // [!code ++]
import UniverPresetSheetsCollaborationEnUS from '@univerjs/preset-sheets-collaboration/locales/en-US' // [!code ++]
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsDrawingPreset } from '@univerjs/preset-sheets-drawing' // [!code ++]
import UniverPresetSheetsDrawingEnUS from '@univerjs/preset-sheets-drawing/locales/en-US' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-drawing/lib/index.css' // [!code ++]
import '@univerjs/preset-sheets-advanced/lib/index.css' // [!code ++]
import '@univerjs/preset-sheets-collaboration/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsDrawingEnUS, // [!code ++]
      UniverPresetSheetsAdvancedEnUS, // [!code ++]
      UniverPresetSheetsCollaborationEnUS, // [!code ++]
    ),
  },
  collaboration: true, // 共同編集を有効化 // [!code ++]
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsDrawingPreset({ // [!code ++]
      collaboration: true, // 共同編集を有効化 // [!code ++]
    }), // [!code ++]
    UniverSheetsAdvancedPreset({ // [!code ++]
      // 高度な機能の設定
    }), // [!code ++]
    UniverSheetsCollaborationPreset({ // [!code ++]
      universerEndpoint: 'http://localhost:3010', // Univer サーバーのエンドポイント // [!code ++]
    }), // [!code ++]
  ],
})
```

Univer の商用ライセンスをお持ちの場合は、設定方法について [クライアントでのライセンス](/guides/pro/license#in-preset-mode) を参照してください。

{/* ### プリセットと設定 */}

## プラグインモード

### インストール

```package-install
npm install @univerjs-pro/collaboration @univerjs-pro/collaboration-client @univerjs-pro/collaboration-client-ui
```

### 使い方

```typescript
import { UniverCollaborationPlugin } from '@univerjs-pro/collaboration' // [!code ++]
import { UniverCollaborationClientPlugin } from '@univerjs-pro/collaboration-client' // [!code ++]
import { BrowserCollaborationSocketService, UniverCollaborationClientUIPlugin } from '@univerjs-pro/collaboration-client-ui' // [!code ++]
import CollaborationClientEnUS from '@univerjs-pro/collaboration-client/locale/en-US' // [!code ++]
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'

import '@univerjs-pro/collaboration-client/facade' // [!code ++]
import '@univerjs-pro/collaboration-client-ui/facade' // [!code ++]

import '@univerjs-pro/collaboration-client/lib/index.css' // [!code ++]

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      CollaborationClientEnUS, // [!code ++]
    ),
  },
})

// override オプションに [[IAuthzIoService, null]] を設定すると、組み込みの IAuthzIoService を登録しないよう Univer に指示できます。
// override オプションに [[IUndoRedoService, null]] を設定すると、組み込みの IUndoRedoService を登録しないよう Univer に指示できます。
// これにより、Univer は認可とアンドゥ/リドゥ機能の実装として、UniverCollaborationPlugin が提供するサービスを使用します。
const univer = new Univer({
  override: [ // [!code ++]
    [IAuthzIoService, null], // [!code ++]
    [IUndoRedoService, null], // [!code ++]
  ], // [!code ++]
})

univer.registerPlugin(UniverCollaborationPlugin) // コラボレーション プラグインを登録 // [!code ++]
univer.registerPlugin(UniverCollaborationClientPlugin, { // [!code ++]
  socketService: BrowserCollaborationSocketService, // ブラウザー用ソケット サービス // [!code ++]
  authzUrl: 'http://localhost:3010/universer-api/authz', // 認可 API // [!code ++]
  snapshotServerUrl: 'http://localhost:3010/universer-api/snapshot', // スナップショット API // [!code ++]
  collabSubmitChangesetUrl: 'http://localhost:3010/universer-api/comb', // 変更セット送信 API // [!code ++]
  collabWebSocketUrl: 'ws://localhost:3010/universer-api/comb/connect', // 変更通知 WebSocket // [!code ++]
}) // [!code ++]
univer.registerPlugin(UniverCollaborationClientUIPlugin) // クライアント UI プラグインを登録 // [!code ++]
```

Univer の商用ライセンスをお持ちの場合は、設定方法について [クライアントでのライセンス](/guides/pro/license#in-plugin-mode) を参照してください。

{/* ### プラグインと設定 */}

## 共同ドキュメント データ

共同編集プラグインは Univer サーバーに依存し、共同ドキュメントのデータは Univer サーバーに保存されます。

### `unitId`

Univer サーバー上の各共同ドキュメントには一意の `unitId` が割り当てられています。Univer のコラボレーション クライアント（共同編集プラグイン）は、この `unitId` を使って Univer サーバーから対象の共同ドキュメント データを取得し、共同編集を行います。

### `type`

`type` は共同ドキュメントの種別で、共同ドキュメントの初期データ構造を決定します。

## 共同ドキュメントの作成

Univer サーバーで共同ドキュメントを作成する方法はいくつかあります。

- [Create Document](/guides/pro/api#create-document) API を使って空のドキュメントを作成できます。
- [インポート プラグイン](/guides/sheets/features/import-export) が提供する `FUniver.importXLSXToUnitIdAsync` メソッドを使って、`.xlsx` ファイルを Univer サーバーへインポートできます。

## URL パラメーターで共同ドキュメントを読み込む

`@univerjs-pro/collaboration-client` プラグインは、URL パラメーター `unit` と `type` に基づいて該当データを自動読み込みする機能を提供します。これにより、状況によってはデータ読み込みの処理を簡素化できます。

この機能を利用する場合は、既存のデータ読み込みロジックを適宜調整し、以下のように URL に `unit` と `type` のパラメーターを付与してください。

```typescript
import { UniverInstanceType } from '@univerjs/core'
// プリセットモードでは、`UniverInstanceType` は `@univerjs/presets` からもインポートできます
import { UniverInstanceType } from '@univerjs/presets'

// もとのロジック（非共同編集ドキュメント向け）
univer.createUnit(UniverInstanceType.UNIVER_SHEET, {}) // [!code --]

// 変更後のロジック（共同編集ドキュメント向け）
const url = new URL(window.location.href) // [!code ++]
const unit = url.searchParams.get('unit') // [!code ++]

if (unit) { // [!code ++]
  // URL に unit がある場合は自動的にデータを読み込みます
} else { // [!code ++]
  // または新しいドキュメントを作成します
  fetch(`/universer-api/snapshot/${UniverInstanceType.UNIVER_SHEET}/unit/-/create`, { // [!code ++]
    method: 'POST', // [!code ++]
    headers: { // リクエスト ヘッダー // [!code ++]
      'Content-Type': 'application/json', // [!code ++]
    }, // [!code ++]
    body: JSON.stringify({ // リクエスト ボディ // [!code ++]
      type: UniverInstanceType.UNIVER_SHEET, // インスタンス種別 // [!code ++]
      name: 'New Sheet By Univer', // ワークブック名 // [!code ++]
      creator: 'user', // 作成者名 // [!code ++]
    }), // [!code ++]
  }).then((response) => { // [!code ++]
    if (!response.ok) { // [!code ++]
      throw new Error('create unit failed') // ユニット作成失敗 // [!code ++]
    } // [!code ++]
    return response.json() // [!code ++]
  }).then((data) => { // [!code ++]
    if (!data.unitID) { // [!code ++]
      throw new Error('create unit failed') // ユニット作成失敗 // [!code ++]
    } // [!code ++]
    url.searchParams.set('unit', data.unitID) // [!code ++]
    url.searchParams.set('type', String(UniverInstanceType.UNIVER_SHEET)) // [!code ++]
    window.location.href = url.toString() // [!code ++]
  }).catch((error) => { // [!code ++]
    console.error(error) // エラー出力 // [!code ++]
  }) // [!code ++]
} // [!code ++]
```

## Facade API

### 共同ドキュメントの読み込み

URL パラメーターを使用せずに読み込みたい場合は、Facade API を通じて共同ドキュメントを読み込むこともできます。

```typescript
const collaboration = univerAPI.getCollaboration()
const workbook = await collaboration.loadSheetAsync('your-unit-id')
```

## さらに読む

共同編集の仕組みについてさらに知りたい方は、次の記事をご覧ください。

- [OT アルゴリズムと Univer の共同編集設計](/blog/ot)
